<template>
    <div>
        <div class="page">
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="68px">
                            <el-form-item label="用户ID">
                                <el-input v-model="queryParams.userId" placeholder="请输入用户ID"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-autocomplete v-model="queryParams.cellphone" placeholder="请输入手机号"
                                :fetch-suggestions="querySearchAsync"
                                @select="handleSelect"></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="提现单号">
                                <el-input v-model="queryParams.withdrawNo" placeholder="请输入提现单号"></el-input>
                               
                            </el-form-item>
                            <el-form-item label="卡号">
                                <el-input v-model="queryParams.cardNumber" placeholder="请输入卡号"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="queryParams.state">
                                    <el-option label="待审核" value="pending"></el-option>
                                    <el-option label="审核通过" value="success"></el-option>
                                    <el-option label="审核驳回" value="failure"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                                <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-row>
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <el-row>
                        <el-col :span='2'>
                            <el-button @click='updateStatusByIds()' type="primary">批量审核</el-button>
                        </el-col>
                        <!-- <el-col :span='2'>
                            <el-button @click='stateUnlockHandle()' type="primary">批量解锁</el-button>
                        </el-col> -->
                        <el-col :span='2'>
                            <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
                        </el-col>
                        <el-col :span='2'>
                            <el-checkbox @change="handlechecked" v-model="checked">只看待审核</el-checkbox>
                        </el-col>
                        <el-col :span='18'>
                            金额：{{money.num1}}元，手续费：{{money.num2}}元，到帐金额：{{money.num3}}元
                        </el-col>
                        
                        
                        
                    </el-row>
                    <el-table  ref="filterTable" @selection-change='handleSelection'  :data='list' >
                    
                        <el-table-column type='selection' width='55' :selectable="checkSelect" />
                        <el-table-column label="ID" prop='id' />
                        <el-table-column label="用户ID" prop='userId' />
                        <el-table-column label="手机号" prop='cellphone' />
                        <el-table-column label="角色" prop='roleLevel'>
                            <template slot-scope = 'scope'>
                                <div v-if="scope.row.roleLevel == '2-1742'">经销商</div>
                                <div v-else-if="scope.row.roleLevel == '2-1741'">经理</div>
                                <div v-else-if="scope.row.roleLevel == '2-0'">会员</div>
                                <div v-else>{{scope.row.roleLevel}}</div>
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="网体" prop='fttLevel' />
                        <el-table-column label="姓名" prop='idname' />
                        <el-table-column label="提现单号" prop='withdrawNo' />
                        <el-table-column label="银行名称" prop='bankName' />
                        <el-table-column label="卡号" prop='cardNumber' />
                        <el-table-column label="金额" prop='money' />
                        <el-table-column label="手续费" prop='serviceFee' />
                        <el-table-column label="到帐金额" prop='a'>
                            <template slot-scope="scope">
                                <div>{{scope.row.money - scope.row.serviceFee}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop='state'>
                            <template slot-scope='scope'>
                                <div v-if="scope.row.state == 'pending'">待审核</div>
                                <div v-if="scope.row.state == 'success'">审核通过</div>
                                <div v-if="scope.row.state == 'failure'">审核驳回</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop='createdAt'>
                            <template slot-scope="scope">
                                <div>{{scope.row.createdAt | formatDate}}</div>
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="外部订单号" prop='outerOrderNo' />
                        <el-table-column label="备注" prop='memo' />
                    </el-table>
                    <pagination  v-show="total>0" :total="total"  :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList" />
                </el-row>
            </el-row>
        </div>
        <el-dialog title="批量审核" :visible.sync="stateView" width="500px" append-to-body>
            <el-form  :model="userForm"  :rules="rules" ref="userForm" label-width="140px">
                <el-form-item label="ids:" prop='ids'>
                    {{userForm.ids}}
                </el-form-item>
                <el-form-item label="状态:" prop='state'>
                    <el-select v-model="userForm.state">
                        <el-option label="审核通过" value="success"></el-option>
                        <el-option label="审核驳回" value="failure"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="userForm.memo" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :disabled="disabled" type="primary" @click="SubmitForm(userForm)">确 定</el-button>
                <el-button @click="userCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Table from '@/views/components/myTable'
import myForm from '@/views/components/myForm'
import { getWithdraws,putStateBatch,userListAPI,withdrawsExport,withdrawsStateUnlock } from '@/api/ka/ka'
export default {
    components:{
        Table,
        myForm
    },
    data() {
        return {
            loading:false,
            exportLoading: false,
            checked:false,
            disabled:false,
            rules:{
                ids:[{required: true, message: "id不能为空"}],
                state:[{required: true, message: "状态不能为空"}]
            },
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            stateView:false,
            userForm:{
                ids:'',
                state:''
            },
            list:[],
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            selectioned:[],
            restaurants:[],
            timeout:null,
            money:{
                num1:0,
                num2:0,
                num3:0,

            },
        }
    },
    created(){
        
        this.init()
    },
    methods:{
        //初始化
        init(){
            this.checked = true
            this.queryParams.state = "pending"
            this.getList()
        },
        //列表
        getList(){
            let data = this.addDateRange(this.queryParams)
            getWithdraws(data).then(res=>{
                 if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //选择
        handleSelection(val){
            this.selectioned = val
            let num1 = 0, num2 =0
            this.selectioned.forEach(item=>{
                num1 += item.money
                num2 += item.serviceFee
                if(item.state=='success'){

                }
            })
            this.money.num1 = num1
            this.money.num2 = num2
            this.money.num3 = this.money.num1 - this.money.num2
        },
        //确认
        SubmitForm(val){
            this.$refs['userForm'].validate(valid=>{
                console.log(valid)
                if(valid){
                    let data ={
                        ids:val.ids,
                        state:val.state,
                        memo:val.memo
                    }
                    this.disabled = true
                    putStateBatch(data).then(res=>{
                        
                        if(res.code == 200){
                            this.stateView = false
                            this.getList()
                        }else{
                            
                        }
                    })
                }
            })
            
        },
        //取消
        userCancel(){
            this.$refs['userForm'].resetFields();
            this.disabled = false
            this.stateView = false
        },
        checkSelect(row){
            return row.state === "pending"
        },
        //批量审核通过
        updateStatusByIds(){
            this.disabled = false
            this.stateView = true
            this.userForm.state =''
            let arr = []
            this.selectioned.forEach(item=>{
                arr.push(item.id)
            })
            let str = arr.join()
            this.userForm.ids = str
        },
        //批量解锁
        // stateUnlockHandle(){
        //     let arr = []
        //     this.selectioned.forEach(item=>{
        //         arr.push(item.id)
        //     })
        //     let str = arr.join()
        //     this.queryParams.ids = str
        //     const queryParams = this.queryParams;
        //     this.$confirm("您解锁的数据id为："+this.queryParams.ids+"，请认真核对审批解锁的数据，防止重复提交数据", "警告", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //         }).then(() => {
        //             return withdrawsStateUnlock(queryParams)
        //         }).catch(() => {});

        // },
        //过滤
        handlechecked(val){
            
            if(val){
                this.queryParams.state = "pending"
                this.getList()
                
            }else{
                this.queryParams.state = null
                this.getList()
            }
        },
        //远程搜索
        handleSelect(val){
            this.queryParams.userId = val.userId
        },
        querySearchAsync(queryString,cb){
            var restaurants = []
            let data = {
                cellphone:queryString
            }
            userListAPI(data).then(res=>{
                if(res.data.code == 200){
                    let results = res.data.rows
                    results.forEach(item=>{
                        restaurants.push({value:item.cellphone,userId:item.id})
                    })
                    cb(restaurants)
                }
            })
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchReset();
            this.handleQuery();
            
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                cellphone:undefined,
                userId:undefined
            }
        },
        /** 导出按钮操作 */
        handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有提现数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return withdrawsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        }
    }
}
</script>
<style scoped>
.page {width:100%; height:auto; min-height:90vh; background: #eee; padding:20px;}
.part1_box {background:#fff; width:100%; margin-bottom:20px; border-radius: 20px;}
.part_title {font-size:30px; font-weight: bold; margin-top:20px; margin-left:20px; display: block; float:left;}
.part_dateDay { margin-top:30px; margin-left:20px;  display: block; float:left;}
.part1_list {height:146px; width:80%; 
background: linear-gradient(30deg, #2285FF 0%, #3BAEFF 100%); border-radius: 20px; margin-top:40px; color:#fff;}
.part1_list p {margin:0; padding:0; padding-top:20px; padding-left:40px;}
.part1_list p:nth-child(1) { font-size:24px;}
.part1_list p:nth-child(2) {font-size:50px;}
</style>
